import React, { useState, useRef, useEffect } from 'react';
import { Form, Select, Input, Checkbox, Button, Collapse } from 'antd';
import '../assets/css/louyu.css';
import { DownOutlined, UpOutlined } from "@ant-design/icons";


const { Option } = Select;
const { Panel } = Collapse;

export default function Kongjian1() {
    const [isCollapsed, setIsCollapsed] = useState(true);
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log('Received values of form: ', values);
        // 这里可以添加你的逻辑，例如发送请求到服务器
    };

    const toggleCollapse = () => {
        setIsCollapsed(!isCollapsed);
    };

    const [zhankaishouqi, genxinzhi] = useState(false);
  const contentRef = useRef(null);
  
  const shouzhan = () => {
    genxinzhi(!zhankaishouqi);
  };

  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.style.height = zhankaishouqi
        ? "0px"
        : `${contentRef.current.scrollHeight}px`;
    }
  }, [zhankaishouqi]);

    return (
        <div className=''>
            <Form form={form} name="basic" onFinish={onFinish} initialValues={{ remember: true }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '16px' }}>
                    <Button type="primary" className='mxinjian'>新建空间</Button>
                </div>

                {/* 新建空间下方的内容 */}
                <div className='mkongxuanze' >
                    <div className='mxuan1'>
                        <Form name="building">
                            <Select className='mxuanlou' placeholder="请选择楼宇">
                                <Option value="A楼">A楼</Option>
                                <Option value="B楼">B楼</Option>
                                <Option value="C楼">C楼</Option>
                                <Option value="D楼">D楼</Option>
                            </Select>
                        </Form>
                        <Form name="floor">
                            <Select className='mxuanlou' placeholder="请选择楼层" >
                                <Option value="1">1</Option>
                                <Option value="2">2</Option>
                                <Option value="3">3</Option>
                                <Option value="4">4</Option>
                            </Select>

                            <input className='mxuanlou1' placeholder="  请输入空间名称" />
                        </Form>
                    </div>


                    <div
            ref={contentRef}
            style={{
              height: "0px",
              overflow: "hidden",
              transition: "1s",
            }}
          >
                    <div className='mzhauntai'>
                        <p>状态</p>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>上架中</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>已下架</span>
                        </div>
                    </div>
                    <div className='mzhauntai'>
                        <p>面积</p>
                        <div className='mduoxuan'>
                        <input type="text" />
                        <div>&nbsp; m² ~ </div>
                        <input type="text" />
                        &nbsp; m²
                        </div>
                    </div>
                    <div className='mzhauntai'>
                        <p>装修</p>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>毛坯</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>简装</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>精装</span>
                        </div>
                    </div>
                    <div className='mzhauntai'>
                        <p>状态</p>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>东</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>南</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>西</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>北</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>东南</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>西南</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>东北</span>
                        </div>
                        <div className='mduoxuan'>
                        <input type="checkbox" name="interest" value="sports"/>
                        <span>西北</span>
                        </div>
                        
                    </div>
                    </div>
                    </div>
                    <div className="zshoudong">
                        <div className='mshouqi'>
            <div className="zshouzhoshou"></div>
            <div className="zshouzhozi" onClick={shouzhan}>
                
              {zhankaishouqi ? (
                <div>
                  <DownOutlined />
                  <span>更多筛选</span>
                </div>
              ) : (
                <div>
                  <UpOutlined />
                  <span>收起筛选</span>
                </div>
              )}
              
            </div>
            <div className="zshouzhoshou"></div>        
                    </div>

                    <Form.Item className='mchaxun1'>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                        <Button htmlType="reset">
                            重置
                        </Button>
                    </Form.Item>
                </div>
            </Form>
            <div className='mkongjian'>
                <div className='mkongjianti'>
                    <p>名称</p>
                    <p>楼宇</p>
                    <p>楼层</p>
                    <p>面积(m²)</p>
                    <p>装修</p>
                    <p>朝向</p>
                    <p>状态</p>
                    <p>操作</p>
                </div>
            </div>
        </div>
    );
}